<template>
    <drop-wrap :data="data" :index="index"  :element="element">
      <div class="folded-panel-wrap">
        <draggable
          v-model="element.columns"
          :no-transition-on-drag="true"
          v-bind="{
            group: 'site',
            ghostClass: 'ghost',
            animation: 200,
            handle: '.mover',
          }"
          @add="handleColumnsAdd($event)"
        >
          <transition-group
            name="fade"
            tag="div"
            v-drop-blank
            class="folded-container"
            :style="style"
          >
            <widget
              v-for="(el, i) in element.columns"
              :element="el"
              :index="i"
              :key="el.key"
              :data.sync="element.columns"
            ></widget>
          </transition-group>
        </draggable>

        <collapseTransition>
          <div v-if="show">
            <draggable
              v-model="element.hiddenColumns"
              :no-transition-on-drag="true"
              v-bind="{
                group: 'site',
                ghostClass: 'ghost',
                animation: 200,
                handle: '.mover',
              }"
              @add="hiddenColumnsAdd($event)"
            >
              <transition-group
                name="fade"
                tag="div"
                v-drop-blank
                class="folded-hidden-container"
                :style="style"
              >
                <widget
                  v-for="(el, i) in element.hiddenColumns"
                  :element="el"
                  :index="i"
                  :key="el.key"
                  :data.sync="element.hiddenColumns"
                ></widget>
              </transition-group>
            </draggable>
          </div>
        </collapseTransition>
        <div class="more-search">
          <div class="button" @click="show = !show">
            <i v-if="show" class="el-icon-arrow-up"></i>
            <i v-else class="el-icon-arrow-down"></i>
            <span>
              {{ show ? '收起' : '展开' }}
            </span>
          </div>
        </div>
      </div>
    </drop-wrap>
</template>

<script>
import collapseTransition from './collapse-transition'
import clone from 'clone'
import Draggable from 'vuedraggable'
export default {
  props: ['element', 'data', 'index'],
  data() {
    return {
      show: false,
    }
  },
  computed: {
    store() {
      return this.element.getRoot();
    },
    style() {
      let boxModel = {}
      Object.entries(this.element.boxModelStyle).map((item) => {
        boxModel[item[0]] = item[1] + 'px'
      })
      return {
        ...boxModel,
      }
    },
  },
  components: { Draggable, collapseTransition },
  methods: {
    handleColumnsAdd(evt) {
      console.log('add', evt)
      console.log('end', evt)
      const newIndex = evt.newIndex
      const to = evt.to
      console.log(to)

      console.log('需要删除的key', this.element.columns[newIndex].key)
      if (this.element.columns[newIndex].key) {
        this.store.delComponentMap(this.element.columns[newIndex])
      }
      this.$set(
        this.element.columns,
        newIndex,
        this.store.generateComponent({
          ...clone(this.element.columns[newIndex]),
        })
      )
      this.store.current = this.element.columns[newIndex]
      this.$handleStack.push(clone(this.store.root))
    },
    hiddenColumnsAdd(evt) {
      console.log('add', evt)
      console.log('end', evt)
      const newIndex = evt.newIndex
      const to = evt.to
      console.log(to)

      console.log('需要删除的key', this.element.hiddenColumns[newIndex].key)
      if (this.element.hiddenColumns[newIndex].key) {
        this.store.delComponentMap(this.element.hiddenColumns[newIndex])
      }
      this.$set(
        this.element.hiddenColumns,
        newIndex,
        this.store.generateComponent({
          ...clone(this.element.hiddenColumns[newIndex]),
        })
      )
      this.store.current = this.element.hiddenColumns[newIndex]
      this.$handleStack.push(clone(this.store.root))
    },
  },
}
</script>

<style lang="scss" scoped>
.folded-container {
  min-height: 50px;
  margin: 0 15px;
}
.folded-hidden-container {
  min-height: 100px;
  margin: 0 15px;
}
.more-search {
  margin-top: 15px;
  border-top: 1px dashed #eeeeee;
  padding-bottom: 26px;
  position: relative;
  .button {
    position: absolute;
    height: 16px;
    line-height: 0px;
    font-size: 12px;
    color: #999;
    text-align: center;
    padding: 12px 8px 0px 8px;
    background: #fff;
    display: inline-block;
    left: 50%;
    margin-left: -26px;
    top: -12px;
    cursor: pointer;
  }
}
.folded-panel-wrap {
  margin: 0 15px;
  margin-bottom: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
